<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-col align="left" :span="8">
          <el-button
            type="primary add_btn height32"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="open_pop_up"
          >
            导入
          </el-button>
        </el-col>

        <!-- list input -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          ref="dataForm"
          :model="temp"
        >
          <el-form-item label="药物名称">
            <el-input
              placeholder="药物名称"
              v-model="temp.medicinesName"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getDoctors">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <!-- 数据列表 -->
    <el-table :data="list">
      <el-table-column label="Id" prop="medicinesId" align="center" />
      <el-table-column label="药品编号" prop="medicinesNumber" align="center" />
      <el-table-column label="药品名称" prop="medicinesName" align="center" />
      <el-table-column label="药品分类" prop="medicinesClass" align="center" />
      <el-table-column
        label="处方类型"
        prop="prescriptionType"
        align="center"
      />
      <el-table-column label="单位（g/条）" prop="unit" align="center" />
      <el-table-column label="换算量" prop="conversion" align="center" />
      <el-table-column label="关键字" prop="keywords" align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center" />
      <el-table-column label="修改时间" prop="updateTime" align="center" />
      <el-table-column label="生产厂家" prop="producter" align="center" />

      <!-- 删除按钮 -->
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[8, 10, 25, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 弹出框 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="800px"
    >
      <el-form
        :inline="true"
        class="demo-form-inline"
        ref="dataForm"
        :model="temp"
      >
        <el-form-item label="药物名称" >
          <el-input
            placeholder="药物名称"
            v-model="temp.medicinesName"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="listQuery_static">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="listQuery" width="150">
        <el-table-column label="药品名称" prop="medicinesName" align="center" />
        <el-table-column
          label="药品分类"
          prop="medicinesClass"
          align="center"
        />
        <el-table-column label="单位（g/条）" prop="unit" align="center" />
        <el-table-column label="换算量" prop="conversion" align="center" />

        <el-table-column align="cneter">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="insert_drug(scope.$index, scope.row)"
              >导入</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- @size-change="handleSizeChange2" -->
      <el-pagination
        @current-change="handleCurrentChange2"
        :current-page="currentPage2"
        :page-sizes="[8]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total2"
      >
      </el-pagination>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible_gb"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { DzmHisMember_list } from "@/api/api_g";
import { DzmHisMember_delete } from "@/api/api_g";
import { DzmHisMember_listQuery } from "@/api/api_g";
import { DzmHisMember_insert } from "@/api/api_g";

export default {
  name: "doctor",
  data() {
    return {
      // 分页后的当前页数据
      list: [],
      // //分页后的当前页数据弹出框
      listQuery: [],
      //当前数据页的第几页
      currentPage: 1,
      // 总数据条数xx
      total: 0,
      // 每页显示多少行数据,默认为10条
      pagesize: 8,
      // 代表是从后端获取的所有数据
      ticket: [],
      // 控制编辑排版信息对话框
      open: false,
      // 表单参数
      from: {},
      // 查询过滤
      handleFilter() {
        this.pageInfo.page = 1;
        this.getList();
      },

      //多条件————————查询条件
      // listQuery: {
      //   supplierName: undefined,
      // },

      //弹出框 新增修改弹出框
      dialogFormVisible: false,
      //弹出框 显示隐藏控制
      dialogStatus: "",
      textMap: {
        create: "导入",
      },
      // 表单数据
      temp: {
        medicinesName: null,
      },
      created() {
        //打开界面执行动作
        this.getList();
      },

      total2: 0,
      pagesize2: 8,
      currentPage2: 1,
      ticket2: [],
    };
  },

  //打开界面执行动作
  created() {
    this.getDoctors();
    this.listQuery_static();
  },
  methods: {
    // selDoctorById(data) {},

    //   查询
    getDoctors() {
      //   this.listLoading = true;
      DzmHisMember_list(this.temp).then((response) => {
        console.log(response.data[0]);
        if (response.code === 200) {
          this.ticket = response.data;
          //获取返回数据的总行数
          this.total = response.data.length;
          // 获取当前页的数据,此方法在下方定义
          this.getDoctorInfo();
          this.$message({
            message: "数据加载成功",
            type: "success",
          });
        } else {
          // 失败提示信息
          this.$$message({
            message: "数据加载错误",
            type: "error",
          });
        }
      });
    },
    // 此方法用来获取当前页的数据
    getDoctorInfo() {
      // 清空表格的list 数据
      this.list = [];
      // 获取当前页的数据
      for (
        let i = (this.currentPage - 1) * this.pagesize;
        i < this.total;
        i++
      ) {
        // 将便利的数据添加到 list 里面
        this.list.push(this.ticket[i]);
        // 判断是否达到每一页的要求
        if (this.list.length === this.pagesize) break;
      }
    },
    // 分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      // 修改当前每页的数据行数
      this.pagesize = size;
      // 数据重新分页
      this.getDoctorInfo();
    },
    // 调整当前的页码
    handleCurrentChange(pageNumber) {
      // 修改当前的页码
      this.currentPage = pageNumber;
      //数据重新分页
      this.getDoctorInfo();
    },
    resetTemp() {
      // 重置 表单
      this.temp = {};
    },

    async handleDelete(index, row) {
      this.$confirm("此操作将删除药物, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        DzmHisMember_delete(row.medicinesId)
          .then(() => {
            this.getDoctors();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },

    //打开弹窗
    open_pop_up() {
      this.listQuery_static();
      this.dialogFormVisible = true;
      this.resetTemp(); //清空表单
    },

    //模态框列表
    listQuery_static() {
      console.log(this.temp.medicinesName);
      DzmHisMember_listQuery(this.temp).then((response) => {
        if (response.code === 200) {
          this.ticket2 = response.data;
          //获取返回数据的总行数
          this.total2 = response.data.length;

          this.getDoctorInfo2();
          // this.$message({
          //   message: "数据加载成功",
          //   type: "success",
          // });
        } else {
          // 失败提示信息
          this.$$message({
            message: "数据加载错误",
            type: "error",
          });
        }
      });
    },

    insert_drug(index, row) {
      DzmHisMember_insert(row.medicinesId).then((response) => {
        this.listQuery_static();
      });
    },

    dialogFormVisible_gb() {
      this.getDoctors();
      this.dialogFormVisible = false;
    },

    // 此方法用来获取当前页的数据
    getDoctorInfo2() {
      // 清空表格的list 数据
      this.listQuery = [];
      // 获取当前页的数据
      for (
        let i = (this.currentPage2 - 1) * this.pagesize2;
        i < this.total2;
        i++
      ) {
        // 将便利的数据添加到 listQuery 里面
        this.listQuery.push(this.ticket2[i]);
        // 判断是否达到每一页的要求
        if (this.listQuery.length === this.pagesize2) break;
      }
    },
    handleCurrentChange2(pageNumber) {
      // 修改当前的页码
      this.currentPage2 = pageNumber;
      //数据重新分页
      this.getDoctorInfo2();
    },
  },
};
</script>